<template>
  <div>
    <div class="acea-row row-middle border_bottom pb-24" v-if="customer">
      <div class="avatar mr20"><img :src="customer.wechatImage"></div>
      <div class="dashboard-workplace-header-tip">
        <p class="dashboard-workplace-header-tip-title" v-text="customer.customerName || '-'"></p>
        <div class="dashboard-workplace-header-tip-desc">
          <span class="dashboard-workplace-header-tip-desc-sp pb-1">余额: {{ customer.balance }}</span>
          <span class="dashboard-workplace-header-tip-desc-sp pb-1">总计订单: {{ customer.orderAmount }}</span>
          <span class="dashboard-workplace-header-tip-desc-sp pb-1">任务总数: {{ customer.taskAmount}}</span>
          <span class="dashboard-workplace-header-tip-desc-sp">客服: {{ customer.serviceName }}</span>
          <span class="dashboard-workplace-header-tip-desc-sp">总消费金额: {{ customer.consumeMoney }}</span>
          <span class="dashboard-workplace-header-tip-desc-sp">客户等级: {{ customer.levelName }}</span>
        </div>
      </div>
    </div>
    <el-row align="middle" :gutter="10" class="ivu-mt mt20">
      <el-col :span="4">
        <el-menu
          default-active="0"
          class="el-menu-vertical-demo"
          @select="changeType"
        >
          <el-menu-item :name="item.val" v-for="(item, index) in list" :key="index" :index="item.val">
            <span slot="title">{{item.label}}</span>
          </el-menu-item >
        </el-menu>
      </el-col>
      <el-col :span="20">
        <el-table :data="tableData.data" class="tabNumWidth"  v-loading="loading" max-height="400"
                  @cell-dblclick="tableDbEdit">
          <el-table-column
            :prop="item.key"
            :label="item.title"
            width="item.minWidth"
            :show-overflow-tooltip="true"
            v-for="(item, index) in columns" :key="index"
          />
          <el-table-column
            v-if="tableFrom.type==2"
            label="密码">
            <template scope="scope">
              <el-input size="small" v-if="showInput==scope.row.id?true:false"
                        v-model="scope.row.password"
                        :ref="scope.row.id"
                        placeholder="请输入内容"
                        @change="handleEdit(scope.$index, scope.row)"
              ></el-input>
              <span v-else>{{scope.row.password}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="状态">
            <template slot-scope="scope">
              <el-switch
                v-if="tableFrom.type==2"
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="0"
                @blur="statusChange(scope.row)"
                @change="statusChange(scope.row)"
                :inactive-value="1">
              </el-switch>
            </template>
          </el-table-column>

          <el-table-column
            v-if="tableFrom.type==2"
            fixed="right"
            label="操作"
            width="200">
            <template slot-scope="scope">
              <el-button @click="tableDbEdit(scope.row)" type="text" size="small">编辑</el-button>
              <el-button @click="deleteCustomerIm(scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>

        </el-table>
        <div class="block">
          <el-pagination
            :page-sizes="[6, 12, 18, 24]"
            :page-size="tableFrom.limit"
            :current-page="tableFrom.page"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.total"
            @size-change="handleSizeChange"
            @current-change="pageChange"
          />
        </div>
      </el-col>
    </el-row>

    <el-dialog width="500px" :visible.sync="ImVisible"
               :before-close="close">
      <el-form ref="form"  label-width="80px">
        <el-form-item label="密码:">
          <el-input v-model="customerIm.password"></el-input>
        </el-form-item>
          <el-button type="primary" @click="updatePassword()">修改</el-button>
          <el-button @click="close">取消</el-button>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {findCustomerById} from "@/api/customer.js"
import {findCustomerDetails} from "@/api/customerBill"
import {updateIm,deleteIm} from "@/api/customerIm"
export default {
  name: "CustomerDetails",
  props:{
    uid: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      loading: false,
      columns: [],
      showInput: '',
      oldData:{},
      customer:null,
      ImVisible: false,
      list: [
        { val: '0', label: '消费记录' },
        { val: '1', label: '充值记录' },
        { val: '2', label: '账号列表' },
      ],
      tableData: {
        data: [],
        total: 0
      },
      tableFrom: {
        page: 1,          //当前页
        limit: 6,         //每页数量
        type : '0',       //分辨左侧菜单栏
      },
      psInfo: {
        user:{
          nickname:"简磊"
        },
        balance:999,
        allOrderCount:8,
        allConsumeCount:88,
        integralCount:88,
        mothOrderCount:4,
        mothConsumeCount:99999
      },
      customerIm:{}
    }
  },
  mounted(){
    if(this.uid){
      this.getHeader()
      this.getInfo()
    }

  },
  methods: {
    changeType(key) {
      this.tableFrom.type = key
      this.tableFrom.page=1;
      this.getInfo()
    },
    getInfo() {
      this.tableFrom.id = this.uid
      findCustomerDetails(this.tableFrom).then(res=>{
        this.tableData.data = res.list
        this.tableData.total = res.total
        switch (this.tableFrom.type) {
        case '0':
          this.columns = [
            {
              title: '订单ID',
              key: 'id',
              minWidth: 250
            },
            {
              title: '付款方式',
              key: 'title',
              minWidth: 90
            },
            {
              title: '付款金额',
              key: 'money',
              minWidth: 80
            },
            {
              title: '交易时间',
              key: 'createTime',
              minWidth: 90
            }
          ]
          break;
        case '1':
          this.columns = [
            {
              title: '订单id',
              key: 'id',
              minWidth: 120
            },
            {
              title: '充值方式',
              key: 'bankName',
              minWidth: 120
            },
            {
              title: '充值金额',
              key: 'remitMoney',
              minWidth: 120
            },
            {
              title: '赠送金额',
              key: 'givePrice',
              minWidth: 120
            },
            {
              title: '余额',
              key: 'accountBalance',
              minWidth: 120
            }
          ]
          break;
          case '2':
            this.columns = [
              {
                title: '账号',
                key: 'account',
                minWidth: 120
              }
            ]
            break;
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    pageChange(page) {
      this.tableFrom.page = page
      this.getInfo()

    },
    handleSizeChange(val) {
      this.tableFrom.limit = val
      this.getInfo()
    },
    getHeader() {
      findCustomerById(this.uid).then(res=>{
        this.customer=res;
      })
    },
    statusChange(date){
      console.log(9894)
      this.customerIm=date;
      this.updateCustomerIm();
    },
    updateCustomerIm(){
      updateIm(this.customerIm).then(res=>{
        this.getInfo();
      })
    }
    ,
    updatePassword(){
      this.updateCustomerIm();
    },
    close(){
      this.customerIm={};
      this.ImVisible=false;
    },
    open(data){
      this.customerIm=data;
      this.ImVisible=true;
    },
    handleEdit(index, row) {
      this.showInput='';
      this.oldData=row;
      updateIm(this.oldData).then(res=>{
        if (res==0){
          //如果修改失败，那么重新查询
          this.getInfo();
        }else {
          this.$message({
            message: '修改成功!',
            type: 'success'
          });
        }
      })
    },
    tableDbEdit(row, column, event) {
      this.showInput = row.id;
      console.log(row)
    },
    deleteCustomerIm(data){
      this.$confirm('此操作将永久删除该账号, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.oldData={};
        this.oldData.customerId=this.uid;
        this.oldData.id=data.id;
        deleteIm(this.oldData).then(res=>{
          if (res==0){
            this.$message.error("删除失败!")
          }else {
            this.$message({
              message: '删除成功!',
              type: 'success'
            });
            this.getInfo();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    }
  }
}
</script>

<style scoped lang="scss">
.avatar{
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  margin-left: 18px;
  img{
    width: 100%;
    height: 100%;
  }
}
.dashboard-workplace {
  &-header {
    &-avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      margin-right: 16px;
      font-weight: 600;
    }

    &-tip {
      width: 82%;
      display: inline-block;
      vertical-align: middle;
      margin-top: -12px;
      &-title {
        font-size: 13px;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.85);
        line-height: 18px;
        padding: 10px 0 10px;
      }

      &-desc {
        &-sp {
          width: 32%;
          color: #17233D;
          font-size: 13px;
          display: inline-block;
        }
      }
    }

    &-extra {
      .ivu-col {
        p {
          text-align: right;
        }

        p:first-child {
          span:first-child {
            margin-right: 4px;
          }

          span:last-child {
            color: #808695;
          }
        }

        p:last-child {
          font-size: 22px;
        }
      }
    }
  }
}
.pb-1{
  padding-bottom: 10px;
}
.mr20{
  margin: 0 20px;
}
.border_bottom{
  border-bottom: 1px solid #E7EAEC;
}
.pb-24{
  padding-bottom: 24px;
}
</style>
